import React, { useState, useEffect } from 'react';
import { Table, Switch, Image } from 'antd';
import { showData, updateFlag } from './../../api/product';

function SeckillList() {
  const [prolist, setProlist] = useState([]);

  useEffect(() => {
    showData({ type: 'isseckill', flag: 1 }).then((res) => {
      setProlist(res.data.data);
    });
  }, []);

  const columns = [
    {
      title: '序号',
      fixed: 'left',
      width: 80,
      render: (text, record, index) => {
        return <span>{index + 1}</span>;
      }
    },
    {
      title: '商品名称',
      fixed: 'left',
      width: 300,
      dataIndex: 'proname',
      key: 'proname'
    },
    {
      title: '商品分类',
      width: 150,
      dataIndex: 'category',
      key: 'category',
      filters: [
        { text: '手机', value: '手机' },
        { text: '口红', value: '口红' }
      ],
      onFilter: (value, record) => record.category.indexOf(value) !== -1
    },
    {
      title: '商品品牌',
      width: 150,
      dataIndex: 'brand',
      key: 'brand'
    },
    {
      title: '商品图片',
      width: 150,
      dataIndex: 'img1',
      key: 'img1',
      render: (text, record) => <Image src={text} width={60} height={60} />
    },
    {
      title: '商品原价',
      width: 150,
      dataIndex: 'originprice',
      key: 'originprice',
      sorter: {
        compare: (a, b) => a.originprice - b.originprice,
        multiple: 1
      }
    },
    {
      title: '商品折扣',
      width: 150,
      dataIndex: 'discount',
      key: 'discount'
    },
    {
      title: '商品销量',
      width: 150,
      dataIndex: 'sales',
      key: 'sales',
      sorter: (a, b) => a.sales - b.sales
    },
    {
      title: '商品库存',
      width: 150,
      dataIndex: 'stock',
      key: 'stock',
      sorter: {
        compare: (a, b) => a.stock - b.stock,
        multiple: 3
      }
    },
    {
      title: '是否秒杀',
      width: 100,
      fixed: 'right',
      dataIndex: 'isseckill',
      key: 'isseckill',
      render: (text, record, index) => {
        return (
          <Switch
            className='seckill'
            checked={text * 1 === 1}
            onChange={(checked) => {
              console.log(checked);
              updateFlag({
                proid: record.proid,
                type: 'isseckill',
                flag: checked
              }).then((res) => {
                showData({ type: 'isseckill', flag: 1 }).then((res) => {
                  setProlist(res.data.data);
                });
              });
            }}
          />
        );
      }
    }
  ];

  return <Table dataSource={prolist} columns={columns} rowkey='proid' />;
}

export default SeckillList;
